<template>
  <main class="acn-main">
    <div class="acn-div">
      <p>
        <span>分配权限</span><span @click="closeAllocationJurisdiction">X</span>
      </p>

      <div class="acn-div-1">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[101, 102, 105]"
          :default-checked-keys="[]"
          :props="defaultProps"
        />
      </div>

      <section>
        <el-button @click="closeAllocationJurisdiction">取消</el-button>
        <el-button type="primary" @click="acnPersons">确定</el-button>
      </section>
    </div>
  </main>
</template>

<script setup>
import axios from "axios";
import VueCookies from "vue-cookies";
import { reactive, ref, onMounted, onBeforeMount } from "vue";
// 列表参数
let list = ref([]);
// 接收参数
const emit = defineEmits(["fff"]);
// 关闭遮罩层
function closeAllocationJurisdiction() {
  emit("fff", false);
}
// 确定
function acnPersons() {
  console.log(1);
}
//
let data = ref([]);
onMounted(() => {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.get("/api/rights/tree", { headers }).then((res) => {
    list.value = res.data.data;
    console.log(list.value);
    for (var i = 0; i < list.value.length; i++) {
      data.value.push({
        id: list.value[i].id,
        label: list.value[i].authName,
        children: [],
      });
      for (var k = 0; k < list.value[i].children.length; k++) {
        data.value[i].children.push({
          id: list.value[i].children[k].id,
          label: list.value[i].children[k].authName,
          children: [],
        });
        for (var x = 0; x < list.value[i].children[k].children.length; x++) {
          data.value[i].children[k].children.push({
            id: list.value[i].children[k].children[x].id,
            label: list.value[i].children[k].children[x].authName,
          });
        }
      }
    }
  });
});

const defaultProps = {
  children: "children",
  label: "label",
  id: "id",
};
</script>

<style scoped>
.acn-main {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.acn-div {
  width: 700px;
  height: 600px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
p {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0px 0px 40px;
}
section {
  display: flex;
  position: absolute;
  bottom: 70px;
  right: 80px;
}
.acn-div-1 {
  height: 400px;
  overflow-y: auto;
  margin-bottom: 100px;
}
</style>